<template>
	<view class="tab-bar" :style="{height: $isNotch ? '168upx' : '148upx'}">
		<view @click="activeBar(index)"  class="tab" v-for="(tab,index) in tabList" :key="index">
			<image v-if="index !== 3" :animation="tab.animationData" :src="activeTabIndex === index ? tab.activeIcon : tab.icon" mode=""></image>
			<view :animation="tab.animationData" :class="['my',activeTabIndex === 3 ? 'active' : 'my']" v-else>
				<image :src="tab.icon" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {home_icon, home_icon_a, find_icon, find_icon_a, message_icon, message_icon_a} from '@/static/svg/index.js'
	const my_icon = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2037546633,2061708947&fm=26&gp=0.jpg'
	export default {
		name: 'TabBar',
		data() {
			return {
				activeTabIndex: 0,
				animationData: {},
				tabList: [
					{ icon: home_icon, activeIcon: home_icon_a, animationData: {} },
					{ icon: find_icon, activeIcon: find_icon_a, animationData: {} },
					{ icon: message_icon, activeIcon: message_icon_a, animationData: {} },
					{ icon: my_icon, activeIcon: my_icon, animationData: {} }
				],
				notch: false
			};
		},
		mounted() {
			this.notch = this.$isNotch
			console.log(this.$isNotch,'刘海屏')
		},
		methods: {
			activeBar (index) {
				this.activeTabIndex = index
				this.shaking(index)
				this.$emit('tabChange', index)
			},
			shaking (index) {
				var animation = uni.createAnimation({
					duration: 500,
				    timingFunction: 'ease',
				})
				
				this.animation = animation
				
				let anim = null
				if (index !== 3) {
					// 不是我的
					animation.rotate(45).step()
					animation.rotate(0).step()
					
					anim = animation.export()
				} else {
					animation.rotate(360).step()
					
					anim = animation.export()
				}
				
				this.tabList = this.tabList.map((item,i) => {
					if (i === index) {
						item.animationData = anim
					} else {
						item.animationData = {}
					}
					return item
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.tab-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
		width: 100%;
		// height: 168upx;
		padding-top: 26upx; // 52 + 96 => 148upx
		box-sizing: border-box;
		border-top: 2upx solid #E6E6E6;
		padding-left: 70upx;
		padding-right: 64upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		.tab {
			image {
				width: 48upx;
				height: 48upx;
			}
			.my {
				width: 48upx;
				height: 48upx;
				border-radius: 50%;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.18);
				border: 2px solid rgba(255, 255, 255, 100);
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.active {
				background-color: rgba(16, 16, 16, 100);
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.18);	
				border: 2px solid rgba(16, 16, 16, 100);
			}
		}
	}

</style>
